<template lang="html">
  <article id="views-property">
    <router-view
      v-on:eExchageCoupon="exchageCoupon"
      :clearEmitter="clearEmitter"
    ></router-view>

    <CouponList
      :couponList="couponList"
    ></CouponList>

    <div class="property-convert_rules">
      <div class="convertTitle">
        <div class="lineOne"></div>
        <div class="convertCont">
          <h1>兑换规则</h1>
        </div>
        <div class="lineTwo"></div>
      </div>
      <div class="content">
          <p>优惠券为数字和字母组合；</p>
          <p>所有形式的优惠券均通过优惠码兑换；</p>
          <p>所有形式的优惠券限定适用于我的课程；</p>
          <p>优惠券在约课支付的时候回直接适用或抵扣；</p>
          <p>优惠券每次只能使用一次；</p>
          <p>优惠券不设找零；</p>
      </div>
    </div>

    <BackBtn></BackBtn>
  </article>
</template>

<script>
import superagent from 'superagent'
import utils from '@/lib/utils'
import authMiddleware from '@/lib/auth-middleware'
export default {
  name: 'PageProperty',
  components: {
    PropertyHeader: require('@/components/property/header'),
    CouponList: require('@/components/property/coupon_list'),
    BackBtn: require('@/components/common_back_button')
  },
  data(){
    return {
      couponList: [],
      clearEmitter: 0
    }
  },
  methods: {
    loadCouponList(){
      this.getCouponList()
      .then(data => {
        this.couponList = data
      })
    },
    getCouponList(){
      return new Promise((resolve, reject) => {
        superagent.get('/api/member/my_coupon')
          .use(authMiddleware())
          .end((err, res) => {
            if(res.ok){
              resolve(res.body.data)
            } else {
              reject(new Error('getCouponList error'))
            }
          })
      })
    },
    exchageCoupon(code){
      this.$store.dispatch('toggleIsLoading')
      this.postExchangeCode(code)
      .then(data => {
        utils.modal({
          title: '兑换优惠券',
          desc: '兑换成功！'
        })
        this.loadCouponList()//更新优惠券
        this.clearEmitter++//清空输入框
        this.$store.dispatch('toggleIsLoading')
      })
      .catch(e => {
        this.$store.dispatch('toggleIsLoading')
        utils.modal({
          title: '兑换优惠券',
          desc: '兑换出错，请联系客服'
        })
      })
    },
    postExchangeCode(exchange_code){
      return new Promise((resolve, reject) => {
        superagent.post('/api/member/exchange_coupon')
          .use(authMiddleware())
          .query({
            exchange_code
          })
          .end((err, res) => {
            if(res.ok){
              resolve(res.body.data)
            } else {
              reject('exchageCoupon error')
            }
          })
      })
    }
  },
  created(){
    this.loadCouponList()
  }
}
</script>

<style lang="scss" scoped>
@import "../css/config";
#views-property{
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding-bottom: $backbtn-height;
  background-color: $common-black;
  .property-convert_rules{
    margin: 0 auto;
    width: 670px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .convertTitle{
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    .lineOne{
      width: 221px;
      border-bottom: 2px solid #EB440D;
    }
    .convertCont>h1{
      font-size: 23.75px;
      color: #EB440D;
    }
    .lineTwo{
      width: 221px;
      border-bottom: 2px solid #EB440D;
    }
    .content{
      margin-top: 36px;
      color: white;
      font-size: 24px;
      text-align: center;
      p{
        margin-bottom: 15px;
      }
    }
  }
}
</style>
